<template>
  <div class="ai-classify-view">
    <!-- 页面标题 -->
    <div class="page-header glass-card">
      <div class="header-content">
        <h1 class="page-title">AI智能分类</h1>
        <p class="page-subtitle">使用人工智能技术自动识别和分类您的媒体文件</p>
      </div>
      <div class="header-actions">
        <button class="btn btn-primary" @click="openBatchProcess">
          <tiny-icon-magic />
          批量处理
        </button>
        <button class="btn btn-secondary" @click="viewStatistics">
          <tiny-icon-chart />
          处理统计
        </button>
      </div>
    </div>

    <!-- AI功能面板 -->
    <div class="ai-features glass-card">
      <div class="features-grid">
        <!-- 智能标签识别 -->
        <div class="feature-card" @click="openTagRecognition">
          <div class="feature-icon tag-recognition">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z" stroke="currentColor" stroke-width="2"/>
              <line stroke="currentColor" stroke-width="2" x1="7" x2="7" y1="7" y2="7"/>
            </svg>
          </div>
          <div class="feature-content">
            <h3>智能标签识别</h3>
            <p>自动识别图片、视频中的物体、场景、人物等信息，生成精准标签</p>
            <div class="feature-stats">
              <span class="stat-item">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" stroke-width="2"/>
                  <polyline points="14,2 14,8 20,8" stroke="currentColor" stroke-width="2"/>
                </svg>
                已处理 {{ statistics.totalProcessed || 0 }} 个文件
              </span>
              <span class="stat-item">
                <svg fill="none" viewBox="0 0 24 24">
                  <polyline points="22,12 18,12 15,21 9,3 6,12 2,12" stroke="currentColor" stroke-width="2"/>
                </svg>
                准确率 {{ (statistics.tagAccuracy || 0.95) * 100 }}%
              </span>
            </div>
          </div>
          <div class="feature-arrow">
            <svg fill="none" viewBox="0 0 24 24">
              <polyline points="9,18 15,12 9,6" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
        </div>

        <!-- 智能相册分类 -->
        <div class="feature-card" @click="openAlbumClassify">
          <div class="feature-icon album-classify">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" stroke="currentColor" stroke-width="2"/>
              <path d="M2 13h20" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="feature-content">
            <h3>智能相册分类</h3>
            <p>基于内容智能分析，自动将文件分类到最合适的相册中</p>
            <div class="feature-stats">
              <span class="stat-item">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" stroke="currentColor" stroke-width="2"/>
                </svg>
                推荐 {{ recommendedAlbums.length }} 个相册
              </span>
              <span class="stat-item">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" stroke-width="2"/>
                </svg>
                待分类 {{ statistics.unclassifiedFiles || 0 }} 个
              </span>
            </div>
          </div>
          <div class="feature-arrow">
            <svg fill="none" viewBox="0 0 24 24">
              <polyline points="9,18 15,12 9,6" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
        </div>

        <!-- 相似文件检测 -->
        <div class="feature-card" @click="openSimilarDetection">
          <div class="feature-icon similar-detection">
            <svg fill="none" viewBox="0 0 24 24">
              <rect height="13" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="13" x="9" y="9"/>
              <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="feature-content">
            <h3>相似文件检测</h3>
            <p>智能检测重复或高度相似的照片和视频，释放宝贵存储空间</p>
            <div class="feature-stats">
              <span class="stat-item">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="2"/>
                </svg>
                发现 {{ similarGroups.length }} 组相似文件
              </span>
              <span class="stat-item">
                <svg fill="none" viewBox="0 0 24 24">
                  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                  <path d="M8 12l2 2 4-4" stroke="currentColor" stroke-width="2"/>
                </svg>
                可节省 {{ formatFileSize(statistics.potentialSavings || 0) }}
              </span>
            </div>
          </div>
          <div class="feature-arrow">
            <svg fill="none" viewBox="0 0 24 24">
              <polyline points="9,18 15,12 9,6" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
        </div>

        <!-- 内容安全检测 -->
        <div class="feature-card" @click="openSafetyCheck">
          <div class="feature-icon safety-check">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="currentColor" stroke-width="2"/>
              <path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="feature-content">
            <h3>内容安全检测</h3>
            <p>AI驱动的内容安全检测，自动过滤不适宜内容，守护家庭数字环境</p>
            <div class="feature-stats">
              <span class="stat-item">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="currentColor" stroke-width="2"/>
                </svg>
                安全评分 {{ Math.round((statistics.averageSafetyScore || 0.98) * 100) }}%
              </span>
              <span class="stat-item">
                <svg fill="none" viewBox="0 0 24 24">
                  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                  <line stroke="currentColor" stroke-width="2" x1="4.93" x2="19.07" y1="4.93" y2="19.07"/>
                </svg>
                已拦截 {{ statistics.blockedContent || 0 }} 个
              </span>
            </div>
          </div>
          <div class="feature-arrow">
            <svg fill="none" viewBox="0 0 24 24">
              <polyline points="9,18 15,12 9,6" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
        </div>

        <!-- 人脸识别 -->
        <div class="feature-card" @click="openFaceRecognition">
          <div class="feature-icon face-recognition">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2"/>
              <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="feature-content">
            <h3>人脸识别</h3>
            <p>智能识别照片中的家庭成员，自动为人物照片添加标签</p>
            <div class="feature-stats">
              <span class="stat-item">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2"/>
                  <circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2"/>
                  <path d="M23 21v-2a4 4 0 0 0-3-3.87" stroke="currentColor" stroke-width="2"/>
                  <path d="M16 3.13a4 4 0 0 1 0 7.75" stroke="currentColor" stroke-width="2"/>
                </svg>
                识别 {{ statistics.recognizedFaces || 0 }} 个人物
              </span>
              <span class="stat-item">
                <svg fill="none" viewBox="0 0 24 24">
                  <rect height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" width="18" x="3" y="3"/>
                  <circle cx="8.5" cy="8.5" r="1.5" stroke="currentColor" stroke-width="2"/>
                  <polyline points="21,15 16,10 5,21" stroke="currentColor" stroke-width="2"/>
                </svg>
                {{ statistics.faceTaggedPhotos || 0 }} 张已标记
              </span>
            </div>
          </div>
          <div class="feature-arrow">
            <svg fill="none" viewBox="0 0 24 24">
              <polyline points="9,18 15,12 9,6" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
        </div>

        <!-- 智能描述生成 -->
        <div class="feature-card" @click="openDescriptionGeneration">
          <div class="feature-icon description-gen">
            <svg fill="none" viewBox="0 0 24 24">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" stroke-width="2"/>
              <polyline points="14,2 14,8 20,8" stroke="currentColor" stroke-width="2"/>
              <line stroke="currentColor" stroke-width="2" x1="16" x2="8" y1="13" y2="13"/>
              <line stroke="currentColor" stroke-width="2" x1="16" x2="8" y1="17" y2="17"/>
              <polyline points="10,9 9,9 8,9" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="feature-content">
            <h3>智能描述生成</h3>
            <p>AI自动分析媒体内容，生成生动详细的文字描述</p>
            <div class="feature-stats">
              <span class="stat-item">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" stroke="currentColor" stroke-width="2"/>
                  <path d="M6.5 2H20v20l-1.586-1.586a2 2 0 0 0-2.828 0L14 22.414a2 2 0 0 1-2.828 0l-1.586-1.586a2 2 0 0 0-2.828 0L5.172 22.414A2 2 0 0 1 2 20.828V6.5A2.5 2.5 0 0 1 4.5 4H6.5V2z" stroke="currentColor" stroke-width="2"/>
                </svg>
                生成 {{ statistics.generatedDescriptions || 0 }} 个描述
              </span>
              <span class="stat-item">
                <svg fill="none" viewBox="0 0 24 24">
                  <path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h4v-9zM19 11h-4v9h4a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2zM12 2L8 5h8l-4-3z" stroke="currentColor" stroke-width="2"/>
                </svg>
                评分 {{ (statistics.descriptionQuality || 0.91) * 10 }}/10
              </span>
            </div>
          </div>
          <div class="feature-arrow">
            <svg fill="none" viewBox="0 0 24 24">
              <polyline points="9,18 15,12 9,6" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
        </div>
      </div>
    </div>

    <!-- 推荐标签 -->
    <div class="recommended-tags glass-card">
      <div class="section-header">
        <h3>推荐标签</h3>
        <button class="btn btn-text" @click="refreshRecommendedTags">
          <tiny-icon-refresh />
          刷新
        </button>
      </div>
      <div class="tags-container">
        <div v-for="category in tagCategories" :key="category.name" class="tag-category">
          <h4 class="category-title">{{ category.name }}</h4>
          <div class="tags-list">
            <span
              v-for="tag in category.tags"
              :key="tag"
              class="tag-item"
              @click="searchByTag(tag)"
            >
              {{ tag }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 热门标签 -->
    <div class="popular-tags glass-card">
      <div class="section-header">
        <h3>热门标签</h3>
        <router-link class="view-all-link" to="/media?view=tags">
          查看全部
          <tiny-icon-chevron-right />
        </router-link>
      </div>
      <div class="tags-cloud">
        <span
          v-for="tag in popularTags"
          :key="tag.name"
          :style="{ fontSize: tag.size + 'px' }"
          class="popular-tag"
          @click="searchByTag(tag.name)"
        >
          {{ tag.name }}
        </span>
      </div>
    </div>

    <!-- 处理历史 -->
    <div class="process-history glass-card">
      <div class="section-header">
        <h3>处理历史</h3>
        <div class="header-filters">
          <tiny-select v-model="historyFilter" placeholder="筛选类型">
            <tiny-option label="全部" value="all" />
            <tiny-option label="标签识别" value="tag-recognition" />
            <tiny-option label="智能分类" value="classification" />
            <tiny-option label="相似检测" value="similarity" />
            <tiny-option label="安全检测" value="safety" />
          </tiny-select>
        </div>
      </div>

      <div class="history-list">
        <div
          v-for="record in filteredHistory"
          :key="record.id"
          class="history-item"
        >
          <div :class="record.type" class="history-icon">
            <component :is="getHistoryIcon(record.type)" />
          </div>
          <div class="history-content">
            <div class="history-title">{{ record.title }}</div>
            <div class="history-meta">
              <span class="history-time">{{ formatTime(record.createTime) }}</span>
              <span class="history-count">处理了 {{ record.fileCount }} 个文件</span>
              <span class="history-duration">耗时 {{ record.duration }}s</span>
            </div>
            <div v-if="record.result" class="history-result">
              <span v-for="tag in record.result.slice(0, 3)" :key="tag" class="result-tag">
                {{ tag }}
              </span>
              <span v-if="record.result.length > 3" class="more-tags">
                +{{ record.result.length - 3 }}
              </span>
            </div>
          </div>
          <div :class="record.status" class="history-status">
            <tiny-icon-check v-if="record.status === 'success'" />
            <tiny-icon-close v-else-if="record.status === 'failed'" />
            <tiny-loading v-else size="small" />
          </div>
        </div>
      </div>
    </div>

    <!-- 批量处理对话框 -->
    <tiny-dialog
      v-model="batchProcessVisible"
      class="batch-process-dialog"
      title="批量AI处理"
      width="800px"
    >
      <div class="batch-process-content">
        <div class="process-options">
          <div class="option-group">
            <h4>处理类型</h4>
            <tiny-checkbox-group v-model="batchOptions.types">
              <tiny-checkbox value="tag-recognition">智能标签识别</tiny-checkbox>
              <tiny-checkbox value="classification">相册分类</tiny-checkbox>
              <tiny-checkbox value="similarity">相似检测</tiny-checkbox>
              <tiny-checkbox value="safety">安全检测</tiny-checkbox>
            </tiny-checkbox-group>
          </div>

          <div class="option-group">
            <h4>文件筛选</h4>
            <div class="filter-row">
              <tiny-select v-model="batchOptions.fileType" placeholder="文件类型">
                <tiny-option label="全部类型" value="" />
                <tiny-option label="图片" value="image" />
                <tiny-option label="视频" value="video" />
                <tiny-option label="音频" value="audio" />
              </tiny-select>
              <tiny-date-picker
                v-model="batchOptions.dateRange"
                placeholder="上传时间范围"
                type="daterange"
              />
            </div>
          </div>

          <div class="option-group">
            <h4>处理设置</h4>
            <tiny-checkbox v-model="batchOptions.overwriteExisting">
              覆盖已有的AI标签
            </tiny-checkbox>
            <tiny-checkbox v-model="batchOptions.autoClassify">
              自动应用分类建议
            </tiny-checkbox>
          </div>
        </div>

        <div v-if="selectedFiles.length > 0" class="selected-files">
          <h4>已选择文件 ({{ selectedFiles.length }})</h4>
          <div class="files-preview">
            <div
              v-for="file in selectedFiles.slice(0, 6)"
              :key="file.fileId"
              class="file-preview"
            >
              <img
                v-if="file.thumbnailUrl"
                :alt="file.fileName"
                :src="file.thumbnailUrl"
              />
              <div v-else :class="file.fileType" class="file-icon">
                <component :is="getFileIcon(file.fileType)" />
              </div>
            </div>
            <div v-if="selectedFiles.length > 6" class="more-files">
              +{{ selectedFiles.length - 6 }}
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <button class="btn btn-secondary" @click="batchProcessVisible = false">
            取消
          </button>
          <button
            :disabled="batchOptions.types.length === 0"
            class="btn btn-primary"
            @click="startBatchProcess"
          >
            开始处理
          </button>
        </div>
      </template>
    </tiny-dialog>

    <!-- 统计对话框 -->
    <tiny-dialog
      v-model="statisticsVisible"
      class="statistics-dialog"
      title="AI处理统计"
      width="1000px"
    >
      <div class="statistics-content">
        <div class="stats-overview">
          <div class="stat-card">
            <div class="stat-number">{{ statistics.totalProcessed || 0 }}</div>
            <div class="stat-label">总处理文件</div>
          </div>
          <div class="stat-card">
            <div class="stat-number">{{ statistics.averageProcessingTime || 0 }}s</div>
            <div class="stat-label">平均处理时间</div>
          </div>
          <div class="stat-card">
            <div class="stat-number">{{ (statistics.accuracyRate || 0.92) * 100 }}%</div>
            <div class="stat-label">识别准确率</div>
          </div>
          <div class="stat-card">
            <div class="stat-number">{{ statistics.tagsGenerated || 0 }}</div>
            <div class="stat-label">生成标签数</div>
          </div>
        </div>

        <div class="stats-charts">
          <!-- 这里可以集成图表库显示统计图表 -->
          <div class="chart-placeholder">
            <h4>处理趋势图</h4>
            <p>图表功能开发中...</p>
          </div>
        </div>
      </div>
    </tiny-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { TinyMessage as Message } from '@opentiny/vue'
import {
  recognizeFileTags,
  batchRecognizeTags,
  getRecommendedTags,
  getPopularTags,
  smartClassifyFiles,
  getAiStatistics
} from '@/api/ai'

const router = useRouter()

// 响应式数据
const batchProcessVisible = ref(false)
const statisticsVisible = ref(false)
const historyFilter = ref('all')
const selectedFiles = ref<any[]>([])
const statistics = ref<any>({})
const recommendedTags = ref<string[]>([])
const popularTags = ref<any[]>([])
const recommendedAlbums = ref<string[]>([])
const similarGroups = ref<any[]>([])
const processHistory = ref<any[]>([])

// 批量处理选项
const batchOptions = reactive({
  types: [] as string[],
  fileType: '',
  dateRange: null,
  overwriteExisting: false,
  autoClassify: true
})

// 标签分类
const tagCategories = ref([
  {
    name: '人物与生活',
    tags: ['家庭', '朋友', '孩子', '老人', '聚会', '生活']
  },
  {
    name: '风景与旅行',
    tags: ['山', '海', '城市', '乡村', '旅行', '风景']
  },
  {
    name: '美食与活动',
    tags: ['美食', '餐厅', '聚餐', '庆祝', '节日', '运动']
  },
  {
    name: '动物与植物',
    tags: ['宠物', '狗', '猫', '花', '树', '植物']
  }
])

// 计算属性
const filteredHistory = computed(() => {
  if (historyFilter.value === 'all') {
    return processHistory.value
  }
  return processHistory.value.filter(record => record.type === historyFilter.value)
})

// 页面方法
const openBatchProcess = () => {
  batchProcessVisible.value = true
}

const viewStatistics = () => {
  statisticsVisible.value = true
}

const openTagRecognition = () => {
  router.push('/media?ai=tag-recognition')
}

const openAlbumClassify = () => {
  router.push('/media?ai=classification')
}

const openSimilarDetection = () => {
  router.push('/media?ai=similarity')
}

const openSafetyCheck = () => {
  router.push('/media?ai=safety')
}

const openFaceRecognition = () => {
  router.push('/media?ai=face-recognition')
}

const openDescriptionGeneration = () => {
  router.push('/media?ai=description-generation')
}

const formatFileSize = (bytes: number): string => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const refreshRecommendedTags = async () => {
  try {
    const response = await getRecommendedTags()
    if (response.code === 200) {
      recommendedTags.value = response.data
    }
  } catch (error) {
    console.error('获取推荐标签失败:', error)
  }
}

const searchByTag = (tag: string) => {
  router.push(`/media?search=${encodeURIComponent(tag)}`)
}

const startBatchProcess = async () => {
  if (batchOptions.types.length === 0) {
    Message.warning('请选择至少一种处理类型')
    return
  }

  try {
    Message.info('批量处理已开始，请稍候...')
    batchProcessVisible.value = false

    // 这里应该调用批量处理API
    // 模拟处理过程
    await new Promise(resolve => setTimeout(resolve, 2000))

    Message.success('批量处理完成')
    loadProcessHistory()

  } catch (error) {
    console.error('批量处理失败:', error)
    Message.error('批量处理失败')
  }
}

const getHistoryIcon = (type: string) => {
  const icons = {
    'tag-recognition': 'tiny-icon-tag',
    'classification': 'tiny-icon-folder',
    'similarity': 'tiny-icon-copy',
    'safety': 'tiny-icon-shield'
  }
  return icons[type] || 'tiny-icon-file'
}

const getFileIcon = (fileType: string) => {
  const icons = {
    image: 'tiny-icon-image',
    video: 'tiny-icon-video',
    audio: 'tiny-icon-music',
    document: 'tiny-icon-file'
  }
  return icons[fileType] || 'tiny-icon-file'
}

const formatTime = (time: string) => {
  return new Date(time).toLocaleString('zh-CN')
}

// 数据加载
const loadStatistics = async () => {
  try {
    const response = await getAiStatistics()
    if (response.code === 200) {
      statistics.value = response.data
    }
  } catch (error) {
    console.error('加载统计数据失败:', error)
  }
}

const loadPopularTags = async () => {
  try {
    const response = await getPopularTags(15)
    if (response.code === 200) {
      // 为标签添加随机字体大小
      popularTags.value = response.data.map((tag: string) => ({
        name: tag,
        size: 12 + Math.random() * 8
      }))
    }
  } catch (error) {
    console.error('加载热门标签失败:', error)
  }
}

const loadProcessHistory = () => {
  // 模拟处理历史数据
  processHistory.value = [
    {
      id: 1,
      type: 'tag-recognition',
      title: '智能标签识别',
      fileCount: 25,
      duration: 45,
      status: 'success',
      createTime: '2024-01-20 14:30:00',
      result: ['家庭', '旅行', '美食', '风景', '人物']
    },
    {
      id: 2,
      type: 'classification',
      title: '相册分类',
      fileCount: 18,
      duration: 12,
      status: 'success',
      createTime: '2024-01-20 10:15:00',
      result: ['家庭相册', '旅行回忆', '美食记录']
    }
  ]
}

// 页面初始化
onMounted(() => {
  loadStatistics()
  loadPopularTags()
  refreshRecommendedTags()
  loadProcessHistory()

  // 模拟推荐相册
  recommendedAlbums.value = ['家庭相册', '旅行回忆', '美食记录', '萌宠时光']

  // 模拟相似文件组
  similarGroups.value = [
    { id: 1, count: 3, type: 'image' },
    { id: 2, count: 2, type: 'video' }
  ]

  // 模拟统计数据
  statistics.value = {
    totalProcessed: 1847,
    averageProcessingTime: 2.3,
    tagAccuracy: 0.95,
    unclassifiedFiles: 127,
    potentialSavings: 2.8 * 1024 * 1024 * 1024, // 2.8GB
    averageSafetyScore: 0.98,
    blockedContent: 5,
    recognizedFaces: 12,
    faceTaggedPhotos: 486,
    generatedDescriptions: 523,
    descriptionQuality: 0.91,
    tagsGenerated: 2156,
    accuracyRate: 0.92
  }
})
</script>

<style lang="scss" scoped>
.ai-classify-view {
  display: flex;
  flex-direction: column;
  gap: $spacing-6;
  padding: $spacing-6;

  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: $spacing-6;

    .header-content {
      .page-title {
        font-size: $font-size-2xl;
        font-weight: $font-weight-bold;
        margin-bottom: $spacing-2;
        background: $gradient-primary;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .page-subtitle {
        color: $gray-600;
        margin: 0;
      }
    }

    .header-actions {
      display: flex;
      gap: $spacing-3;
    }
  }

  .ai-features {
    padding: $spacing-6;

    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: $spacing-4;

      .feature-card {
        display: flex;
        align-items: center;
        gap: $spacing-4;
        padding: $spacing-4;
        background: rgba(255, 255, 255, 0.3);
        border-radius: $radius-lg;
        cursor: pointer;
        transition: all $duration-fast ease;

        &:hover {
          transform: translateY(-2px);
          box-shadow: $shadow-lg;
          background: rgba(255, 255, 255, 0.5);
        }

        .feature-icon {
          width: 48px;
          height: 48px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: $radius-lg;
          color: white;
          font-size: 20px;

          svg {
            width: 24px;
            height: 24px;
            stroke-width: 2;
          }

          &.tag-recognition {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          }

          &.album-classify {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
          }

          &.similar-detection {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
          }

          &.safety-check {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
          }

          &.face-recognition {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
          }

          &.description-gen {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
          }
        }

        .feature-content {
          flex: 1;

          h3 {
            font-size: $font-size-lg;
            font-weight: $font-weight-semibold;
            margin-bottom: $spacing-1;
            color: $gray-800;
          }

          p {
            color: $gray-600;
            margin-bottom: $spacing-2;
            font-size: $font-size-sm;
          }

          .feature-stats {
            display: flex;
            flex-direction: column;
            gap: $spacing-1;

            .stat-item {
              display: flex;
              align-items: center;
              gap: $spacing-2;
              color: $primary-500;
              font-size: $font-size-xs;
              font-weight: $font-weight-medium;

              svg {
                width: 12px;
                height: 12px;
                stroke-width: 2;
                color: $primary-400;
              }
            }
          }
        }

        .feature-arrow {
          color: $gray-400;

          svg {
            width: 16px;
            height: 16px;
            stroke-width: 2;
          }
        }
      }
    }
  }

  .recommended-tags,
  .popular-tags,
  .process-history {
    padding: $spacing-6;

    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: $spacing-4;

      h3 {
        font-size: $font-size-lg;
        font-weight: $font-weight-semibold;
        color: $gray-800;
        margin: 0;
      }

      .view-all-link {
        display: flex;
        align-items: center;
        gap: $spacing-1;
        color: $primary-500;
        text-decoration: none;
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;

        &:hover {
          color: $primary-600;
        }
      }

      .header-filters {
        display: flex;
        gap: $spacing-3;
      }
    }
  }

  .tags-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: $spacing-4;

    .tag-category {
      .category-title {
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        color: $gray-700;
        margin-bottom: $spacing-2;
      }

      .tags-list {
        display: flex;
        flex-wrap: wrap;
        gap: $spacing-2;

        .tag-item {
          padding: $spacing-1 $spacing-3;
          background: rgba($primary-500, 0.1);
          color: $primary-600;
          border-radius: $radius-full;
          font-size: $font-size-xs;
          cursor: pointer;
          transition: all $duration-fast ease;

          &:hover {
            background: rgba($primary-500, 0.2);
            transform: scale(1.05);
          }
        }
      }
    }
  }

  .tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-3;
    align-items: center;

    .popular-tag {
      padding: $spacing-1 $spacing-2;
      background: rgba($secondary-500, 0.1);
      color: $secondary-600;
      border-radius: $radius-md;
      cursor: pointer;
      transition: all $duration-fast ease;
      font-weight: $font-weight-medium;

      &:hover {
        background: rgba($secondary-500, 0.2);
        transform: scale(1.1);
      }
    }
  }

  .history-list {
    display: flex;
    flex-direction: column;
    gap: $spacing-3;

    .history-item {
      display: flex;
      align-items: center;
      gap: $spacing-4;
      padding: $spacing-4;
      background: rgba(255, 255, 255, 0.3);
      border-radius: $radius-lg;
      transition: all $duration-fast ease;

      &:hover {
        background: rgba(255, 255, 255, 0.5);
      }

      .history-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: $radius-lg;
        font-size: 16px;

        &.tag-recognition { background: rgba($success, 0.1); color: $success; }
        &.classification { background: rgba($info, 0.1); color: $info; }
        &.similarity { background: rgba($warning, 0.1); color: $warning; }
        &.safety { background: rgba($error, 0.1); color: $error; }
      }

      .history-content {
        flex: 1;

        .history-title {
          font-weight: $font-weight-medium;
          color: $gray-800;
          margin-bottom: $spacing-1;
        }

        .history-meta {
          display: flex;
          gap: $spacing-3;
          font-size: $font-size-xs;
          color: $gray-500;
          margin-bottom: $spacing-2;
        }

        .history-result {
          display: flex;
          flex-wrap: wrap;
          gap: $spacing-1;

          .result-tag {
            padding: 2px $spacing-2;
            background: rgba($primary-500, 0.1);
            color: $primary-600;
            border-radius: $radius-sm;
            font-size: $font-size-xs;
          }

          .more-tags {
            padding: 2px $spacing-2;
            background: rgba($gray-500, 0.1);
            color: $gray-600;
            border-radius: $radius-sm;
            font-size: $font-size-xs;
          }
        }
      }

      .history-status {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: $radius-full;

        &.success { background: rgba($success, 0.1); color: $success; }
        &.failed { background: rgba($error, 0.1); color: $error; }
        &.processing { background: rgba($info, 0.1); color: $info; }
      }
    }
  }
}

// 对话框样式
.batch-process-dialog,
.statistics-dialog {
  .batch-process-content,
  .statistics-content {
    .process-options {
      display: flex;
      flex-direction: column;
      gap: $spacing-6;

      .option-group {
        h4 {
          font-size: $font-size-md;
          font-weight: $font-weight-medium;
          margin-bottom: $spacing-3;
          color: $gray-800;
        }

        .filter-row {
          display: flex;
          gap: $spacing-3;
        }
      }
    }

    .selected-files {
      margin-top: $spacing-6;
      padding-top: $spacing-4;
      border-top: 1px solid rgba(255, 255, 255, 0.1);

      .files-preview {
        display: flex;
        gap: $spacing-2;
        margin-top: $spacing-3;

        .file-preview {
          width: 60px;
          height: 60px;
          border-radius: $radius-md;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .file-icon {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba($gray-500, 0.1);
            font-size: 20px;
          }
        }

        .more-files {
          width: 60px;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba($primary-500, 0.1);
          color: $primary-600;
          border-radius: $radius-md;
          font-size: $font-size-sm;
          font-weight: $font-weight-medium;
        }
      }
    }

    .stats-overview {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: $spacing-4;
      margin-bottom: $spacing-6;

      .stat-card {
        text-align: center;
        padding: $spacing-4;
        background: rgba(255, 255, 255, 0.3);
        border-radius: $radius-lg;

        .stat-number {
          font-size: $font-size-3xl;
          font-weight: $font-weight-bold;
          color: $primary-500;
          margin-bottom: $spacing-1;
        }

        .stat-label {
          color: $gray-600;
          font-size: $font-size-sm;
        }
      }
    }

    .chart-placeholder {
      text-align: center;
      padding: $spacing-8;
      background: rgba(255, 255, 255, 0.1);
      border-radius: $radius-lg;
      border: 2px dashed rgba($gray-400, 0.3);

      h4 {
        color: $gray-600;
        margin-bottom: $spacing-2;
      }

      p {
        color: $gray-500;
        font-size: $font-size-sm;
      }
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: $spacing-3;
  }
}

// 响应式适配
@media (max-width: 1024px) {
  .ai-classify-view {
    padding: 1.5rem;

    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
      padding: 1.5rem;

      .header-content .page-title {
        font-size: 1.75rem;
      }

      .header-actions {
        width: 100%;
        justify-content: center;
      }
    }

    .ai-features {
      padding: 1.5rem;

      .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1rem;

        .feature-card {
          padding: 1rem;

          .feature-icon {
            width: 44px;
            height: 44px;

            svg {
              width: 22px;
              height: 22px;
            }
          }

          .feature-content {
            h3 {
              font-size: 1rem;
            }

            p {
              font-size: 0.85rem;
            }

            .feature-stats .stat-item {
              font-size: 0.75rem;

              svg {
                width: 10px;
                height: 10px;
              }
            }
          }
        }
      }
    }

    .tags-container {
      grid-template-columns: 1fr;
      gap: 1rem;
    }

    .recommended-tags,
    .popular-tags,
    .process-history {
      padding: 1.5rem;
    }
  }
}

@media (max-width: 768px) {
  .ai-classify-view {
    padding: 1rem;

    .page-header {
      padding: 1rem;

      .header-content {
        .page-title {
          font-size: 1.5rem;
        }

        .page-subtitle {
          font-size: 0.9rem;
        }
      }

      .header-actions {
        flex-direction: column;
        gap: 0.75rem;

        .btn {
          width: 100%;
          justify-content: center;
        }
      }
    }

    .ai-features {
      padding: 1rem;

      .features-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;

        .feature-card {
          flex-direction: column;
          text-align: center;
          padding: 1rem;

          .feature-icon {
            width: 40px;
            height: 40px;
            margin-bottom: 0.75rem;

            svg {
              width: 20px;
              height: 20px;
            }
          }

          .feature-content {
            h3 {
              font-size: 0.95rem;
              margin-bottom: 0.5rem;
            }

            p {
              font-size: 0.8rem;
              margin-bottom: 0.75rem;
            }

            .feature-stats {
              .stat-item {
                justify-content: center;
                font-size: 0.7rem;

                svg {
                  width: 8px;
                  height: 8px;
                }
              }
            }
          }

          .feature-arrow {
            display: none;
          }
        }
      }
    }

    .recommended-tags,
    .popular-tags,
    .process-history {
      padding: 1rem;

      .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;

        h3 {
          font-size: 1rem;
        }

        .header-filters,
        .view-all-link {
          font-size: 0.85rem;
        }
      }
    }

    .tags-container {
      .tag-category {
        .category-title {
          font-size: 0.85rem;
        }

        .tags-list .tag-item {
          font-size: 0.75rem;
          padding: 0.25rem 0.6rem;
        }
      }
    }

    .tags-cloud {
      .popular-tag {
        font-size: 0.8rem !important;
        padding: 0.25rem 0.5rem;
      }
    }

    .history-list {
      .history-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1rem;

        .history-icon {
          width: 36px;
          height: 36px;
          align-self: flex-start;

          svg {
            width: 16px;
            height: 16px;
          }
        }

        .history-content {
          width: 100%;

          .history-title {
            font-size: 0.9rem;
          }

          .history-meta {
            flex-direction: column;
            gap: 0.25rem;
            font-size: 0.75rem;
          }

          .history-result {
            margin-top: 0.5rem;

            .result-tag,
            .more-tags {
              font-size: 0.7rem;
            }
          }
        }

        .history-status {
          width: 20px;
          height: 20px;
          align-self: flex-end;
        }
      }
    }
  }
}

// 暗色主题
[data-theme="dark"] {
  .ai-classify-view {
    .page-header .page-subtitle {
      color: $gray-400;
    }

    .feature-card {
      background: rgba(255, 255, 255, 0.05);

      &:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      .feature-content {
        h3 {
          color: $gray-200;
        }

        p {
          color: $gray-400;
        }
      }
    }

    .section-header h3 {
      color: $gray-200;
    }

    .history-item {
      background: rgba(255, 255, 255, 0.05);

      &:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      .history-content .history-title {
        color: $gray-200;
      }
    }
  }
}
</style>
